<script setup lang="ts">
import { computed, ref } from "vue";
type Prop = {
  index: string;
  borderRadius?: number;
  activeColor?: string;
  activeTextColor?: string;
  bgColor?: string;
  labelWidth?: number | string;
};

const props = withDefaults(defineProps<Prop>(), { index: "" });

const tabIndex = ref(props.index);
const style = computed<any>(() => {
  const s: any = {};
  if (props.borderRadius) {
    s["--k-seg-tab-border-radius"] = `${props.borderRadius}px`;
  }
  if (props.activeColor) {
    s["--k-seg-tag-active-color"] = props.activeColor;
  }
  if (props.bgColor) {
    s["--k-seg-tag-bg-color"] = props.bgColor;
  }
  if (props.activeTextColor) {
    s["--k-seg-tag-active-text"] = props.activeTextColor;
  }
  if (props.labelWidth) {
    s["--k-seg-tab-width"] = `${props.labelWidth}`.replaceAll("px", "") + "px";
  }
  return s;
});
</script>

<template>
  <div class="tab-wrapper" :style="style">
    <el-tabs v-model="tabIndex" class="custom-tab">
      <slot />
    </el-tabs>
  </div>
</template>
<style lang="scss">
.tab-wrapper {
  --k-seg-tab-border-radius: 30px;
  --k-seg-tag-active-color: var(--el-menu-active-color);
  --k-seg-tag-bg-color: var(--el-menu-border-color);
  --k-seg-tag-active-text: var(--el-color-white);
  --k-seg-tag-active-padding: 2px;
  --k-seg-tab-width: none;
  > .custom-tab {
    > .el-tabs__header {
      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            background-color: var(--k-seg-tag-bg-color);
            border-radius: var(--k-seg-tab-border-radius);
            overflow: hidden;
            .el-tabs__item {
              padding: 0;
              z-index: 10;
            }

            .is-active {
              color: var(--k-seg-tag-active-text);
            }

            .el-tabs__active-bar {
              background-color: var(--k-seg-tag-active-color);
              height: 100%;
              border: 4px solid var(--k-seg-tag-bg-color);
              border-radius: var(--k-seg-tab-border-radius);
              box-sizing: border-box;
              // box-sizing: content-box;
              // padding: 0 10px;
            }
          }
        }
      }

      .el-tabs__nav-wrap::after {
        display: none;
      }
    }
  }
}
</style>
